<template>
    <div class="con-body">
        <div class="a">
            <div class="b">
                <el-carousel height="8rem" arrow="never" indicator-position="none" >
                    <el-carousel-item v-for="item in arrImg" :key="item">
                        <img :src =item alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="c">
                <router-view></router-view>
            </div>
        </div>
        <div id="content" class="mw-body" role="main"></div>
    </div>
</template>

<script setup>
//live2D配置项
import "../assets/js/live2D.js"
//登录注册页轮播图图片
let arrImg = [
require("../assets/img/tutu1.jpg"),
require("../assets/img/tutu2.jpg"),
require("../assets/img/tutu3.jpg"),
require("../assets/img/tutu4.jpg"),
require("../assets/img/tutu5.jpg"),
require("../assets/img/tutu6.jpg"),
require("../assets/img/tutu7.jpg"),
require("../assets/img/tutu8.jpg"),
require("../assets/img/tutu9.jpg"),
require("../assets/img/tutu10.jpg"),
]
</script>

<style lang="less" scoped>
.con-body {
    width: 100vw;
    height: 100vh;
    min-width: 1200px;
    background: linear-gradient(to left, #9c88ff, #3cadeb);
    display: flex;
    justify-content: center;
}

.a {

    width: 11rem;
    height: 5.5rem;
    margin-top: 1rem;
    box-shadow: 0 .05rem .15rem rgba(0, 0, 0, .8);
    display: flex;
}

.b {
    width: 8rem;
    height: 5.5rem;
}

.b img {
    width: 8rem;
    height: 5.5rem;
}

.c {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.3rem;
    height: 5.5rem;
    background-color: #fff;
}
</style>
